<template>
  <div>
    <h3>用户管理 <el-button type="primary" round icon="el-icon-plus" style="float: right;margin-right: 50px" @click="add()">新增</el-button></h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="formInline.department" placeholder="部门"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="formInline.creaTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="info" @click="reset">清空</el-button>
      </el-form-item>
      <el-button type="primary" round icon="el-icon-download" @click="downloadExcel()">导出</el-button>
      <el-button type="primary" round icon="el-icon-download" @click="dialogExcelVisible = true">导入</el-button>
    </el-form>
<!--    数据-->
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="lgId" label="用户id" width="70" align="center"></el-table-column>
      <el-table-column prop="lgUsername" label="用户名" width="120" align="center"></el-table-column>
      <el-table-column prop="lgPassword" label="密码" align="center"></el-table-column>
      <el-table-column prop="lgName" label="姓名" align="center"></el-table-column>
      <el-table-column prop="lgDepartment" label="部门" align="center"></el-table-column>
      <el-table-column prop="lgDepartmentJob" label="岗位" align="center"></el-table-column>
      <el-table-column prop="lgPhone" label="电话" align="center"></el-table-column>
      <el-table-column prop="lgPower" label="权限" align="center">
        <template v-slot="{ row }">
          <span v-if="row.lgPower === 1">超级管理员</span>
          <span v-if="row.lgPower === 2">管理员</span>
          <span v-if="row.lgPower === 3">员工</span>
        </template>
      </el-table-column>
      <el-table-column prop="lgCreatTime" label="创建时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--      新增弹框表单-->
    <el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="800px">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth" prop="department">
          <el-input v-model="form.department" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth" prop="departmentJob">
          <el-input v-model="form.departmentJob" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-radio v-model="form.power" :label="1" v-show="show">超级管理员</el-radio>
          <el-radio v-model="form.power" :label="2">管理员</el-radio>
          <el-radio v-model="form.power" :label="3">员工</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--      分页-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 上传excel的对话框 -->
    <el-dialog title="上传计量单位Excel" :visible.sync="dialogExcelVisible" width="40%">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8088/user/upload/excel"
        accept=".xlsx,.xls"
        :on-success="uploadExcelSuccess"
        :on-error="uploadExcelError"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js';
export default index
</script>

<style scoped lang="scss">

</style>
